<template>
  <!-- 选股 -->
  <el-card class="box-card">
    <div class="QuantitativeIntoStocks">
      <div class="tag">
        <div
          class="w_50b"
          :class="{ active: form.type == 'INDUSTRY' }"
          @click="create('INDUSTRY')"
        >
          行业板块
        </div>
        <div
          class="w_50b"
          :class="{ active: form.type == 'gold' }"
          @click="create('gold')"
        >
          金池
        </div>
      </div>

      <!-- 板块 -->
      <IndustryTab v-if="form.type == 'INDUSTRY'" v-model:value="form.plates" />
      <!-- 金池 -->
      <GolaTab v-if="form.type == 'gold'" v-model:value="form.plates" />

      <!-- 时间 -->
      <div class="times">
        <span
          :class="{ active: form.period == item.value }"
          v-for="item in times"
          :key="item.value"
          @click="tapTime(item.value)"
          >{{ item.name }}</span
        >
      </div>
      <!-- 策略 -->
      <div class="strages">
        <span class="name" v-if="type == 1">缠论策略</span>
        <span class="name" v-if="type == 2">多头策略</span>
        <div class="strages_cont">
          <span
            :class="{ active: form.strages == item.value }"
            v-for="item in strages.filter((i) => i.type == '多头')"
            :key="item.value"
            @click="tapStrages(item.value)"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <div class="strages" v-if="type == 2">
        <span class="name">空头策略</span>
        <div class="strages_cont">
          <span
            :class="{ active: form.strages == item.value }"
            v-for="item in strages.filter((i) => i.type == '空头')"
            :key="item.value"
            @click="tapStrages(item.value)"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <div class="strages">
        <span class="name">抄底策略(海底捞月)</span>
        <div class="strages_cont">
          <span
            :class="{ active: form.stragesSea == item.value }"
            v-for="item in stragesSea"
            :key="item.value"
            @click="tapstragesSea(item.value)"
            >{{ item.name }}</span
          >
        </div>
      </div>
      <!-- 保存 -->
      <div class="btn mt_20">
        <el-button @click="clear">重置</el-button>
        <el-button type="primary" @click="chooseStocks">确认</el-button>
      </div>
    </div>
  </el-card>
</template>

<script setup>
import IndustryTab from "./components/IndustryTab.vue";
import GolaTab from "./components/GolaTab.vue";
import { computed, onMounted, reactive, ref } from "vue";
import { defaultApi } from "@/servers";
import { useStore } from "vuex";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
const router = useRouter();
const store = useStore();
const times = computed(() => store.getters.system.times);
let market = computed(() => store.getters.system.market);
const strages = computed(() => store.getters.system.strages);
const stragesSea = computed(() => store.getters.system.stragesSea);
const type = computed(() => store.getters.system.type);

const Stocks = ref([]);
let form = reactive({
  type: "",
  plates: [],
  period: "",
  strages: "",
  stragesSea: "",
});
onMounted(() => {
  create();
});
function tapTime(e) {
  form.period = e;
}
function tapStrages(e) {
  form.strages = e;
}
function tapstragesSea(e) {
  form.stragesSea = e;
}
function create(type = "INDUSTRY") {
  form.type = type;
  form.plates = [];
}

// 清空
function clear() {
  form.plates = [];
  form.period = "";
  form.strages = "";
  form.stragesSea = [];
  create();
}
// 选股
function chooseStocks() {
  const { plates, period, strages, stragesSea } = form;
  if (!plates.length) {
    ElMessage.error("请至少选择一项股票范围！");
    return;
  }
  if (!period) {
    ElMessage.error("请至少选择一项时间周期！");
    return;
  }
  if (![strages, stragesSea].length) {
    ElMessage.error("请至少选择一项选股策略！");
    return;
  }
  defaultApi
    .chooseStocks({
      market: market.value,
      plates: String(plates),
      period,
      strages: String([strages, ...stragesSea]),
    })
    .then((data) => {
      ElMessage.success("保存成功！");
      router.push({
        path: "/QuantitativeIntoStocks/Table",
        name: "Table",
        params: {
          data: JSON.stringify(data),
        },
      });
    });
}
</script>

<style lang="scss" scoped>
.box-card {
  width: 65vw;
  min-width: 600px;
  min-width: none;
  margin: 20px auto;
  text-align: center;
  background: transparent;
  border-color: #999;
  color: #fff;
}
.QuantitativeIntoStocks {
  display: flex;
  flex-wrap: wrap;
  > div {
    width: 100%;
  }
}
.tag {
  display: flex;
  border-radius: 5px;
  font-weight: bold;
  div {
    padding: 15px 0;
    background: #666;
    border-right: 1px solid #fff;
    &:last-child {
      border-right: none;
    }
    &.active {
      background: #999;
    }
  }
}
.times {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  border: 1px solid #999;
  span {
    flex: 1;
    min-width: 100px;
    padding: 10px;
    border-right: 1px solid #999;
    cursor: pointer;
    &.active {
      background: #999;
    }
    &:last-child {
      border-right: none;
    }
  }
}
.strages {
  display: flex;
  .name {
    min-width: 180px;
    padding: 10px 0;
    border: 1px solid #999;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .strages_cont {
    flex: 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    > span {
      flex: 1;
      min-width: 100px;
      padding: 10px 0;
      border: 1px solid #999;
      cursor: pointer;
      &.active {
        background: #999;
      }
    }
  }
}
.btn {
  button {
    width: 25%;
  }
}
@media screen and (max-width: 768px) {
  .box-card {
    width: 100%;
    min-width: auto;
  }
}
</style>